<template>
  <div class="menu-wrapper">
    <el-form ref="sysMchForm" :model="sysMch" :rules="rules" label-width="120px">
      <div style="width: 100%;display: flex;align-items: flex-end;border-bottom: 1px #eee solid;margin-bottom: 20px">
        <span style="font-size: 18px;color:#409EFF;margin: 10px 0;">基本信息</span>
      </div>
      <div class="sysMch_header">
        <div class="sysMch_header_left">
          <el-form-item align="left" label="商户名称" prop="name">
            <el-input v-model="sysMch.name" style="width:235px" />
          </el-form-item>
          <el-form-item label="商户简称" prop="shortName">
            <el-input v-model="sysMch.shortName" style="width:235px" />
          </el-form-item>
          <el-form-item label="行业版本" prop="scopeType">
            <el-select v-model="sysMch.scopeType" style="width:235px" placeholder="请选择状态" @change="scopeTypechange">
              <el-option label="标准版" :value="1" />
              <el-option label="餐饮版" :value="2" />
              <el-option label="水站版" :value="3" />
              <el-option label="商超版" :value="4" />
              <el-option label="美业版" :value="6" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="logo">
          <single-upload :singleUploadTitle="singleUploadTitle" v-model="sysMch.logo" style="display: inline-block; margin-left: 10px; width: 500px" v-if="MuchShow==true"></single-upload>
          <img :src="sysMch.logo" style="width:70px;height:70px" alt="" v-if="sysMch.logo!=null&&MuchShow==false">
          <span v-if="sysMch.logo==null&&MuchShow==false">暂无</span>
        </el-form-item>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="经营信息" name="first">
          <account :mchId="detailsId" :shopgetinfo='sysMch' :MuchShow='MuchShow' ref="childRules" :district='district'></account>
        </el-tab-pane>
        <!--          <el-tab-pane label="商户资料" name="security">-->
        <!--            <security :shopgetinfo='sysMch' :MuchShow='MuchShow'></security>-->
        <!--          </el-tab-pane>-->
        <el-tab-pane label="结算信息" name="bank">
          <bankinformation :shopgetinfo='sysMch' :MuchShow='MuchShow'></bankinformation>
        </el-tab-pane>
      </el-tabs>
      <el-form-item v-if="isshow==true">
        <el-button type="primary" :loading="clicked" @click="updateSysMch('sysMchForm')">
          修 改
        </el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<style scoped>
.menu-wrapper {
  margin: 15px;
}
.sysMch_header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
/deep/ label {
  font-weight: 400!important;
}
</style>
<script>
import security from "./components/security";
import account from "./components/Account";
import banklist from "./components/bank";
import bankinformation from "./components/banklist";
import importtab from "./components/importtab";
import { EventBus } from "@/api/eventBus";
import utils from "../../utils/utils.js";
import { find, update } from "@/api/sysMch";
import SingleUpload from "@/components/Upload/singleUpload";
export default {
  name: "sysMch-edit",
  components: {
    SingleUpload,
    security,
    account,
    banklist,
    importtab,
    bankinformation
  },
  data() {
    var checkEmail = (rule, value, callback) => {
      const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!value) {
        return callback(new Error("邮箱不能为空"));
      }
      setTimeout(() => {
        if (mailReg.test(value)) {
          callback();
        } else {
          callback(new Error("请输入正确的邮箱格式"));
        }
      }, 100);
    };
    return {
      isshow: true,
      activeName: "first",
      MuchShow: true,
      detailsId: null,
      sysMch: {},
      singleUploadTitle: "100*100",
      id: "",
      clicked: false, // 按钮防双击
      district: { province: 350000, city: 350200, area: 350203 },
      rules: {
        name: [
          {
            required: true,
            message: "请输入商户名称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 20 个字符",
            trigger: "blur",
          },
        ],
        shortName: [
          {
            required: true,
            message: "请输入商户简称",
            trigger: "blur",
          },
          {
            min: 2,
            max: 20,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        scopeType: [
          {
            required: true,
            message: "请选择商户版本",
            trigger: "blur",
          },
        ]
      },
    };
  },
  watch: {
    $route(newVal, oldVal) {
      console.log(newVal);
      if (newVal.name == "sysMch-edit" && newVal.query.id != this.id) {
        this.getData();
      }
    },
  },
  created() {
    this.detailsId = this.$route.query.id;
    this.getData();
  },
  methods: {

    handleClick(val) {
      if (val.paneName == "importtab") {
        this.isshow = false;
      } else {
        this.isshow = true;
      }
    },
    scopeTypechange(val) {
      this.sysMch.scopeType = val;
    },
    getData() {
      this.id = this.$route.query.id;
      const _this = this;
      find(this.id)
        .then((response) => {
          console.log(
            utils.dateFormatter(response.data.sysMch.expiredDate)
          );
          if (response.data.sysMch.expiredDate) {
            response.data.sysMch.expiredDate = utils.dateFormatter(
              response.data.sysMch.expiredDate
            );
          }
          _this.sysMch = response.data.sysMch;
        })
        .catch((error) => {});
    },
    updateSysMch(form) {
      const _this = this;
      this.$refs[form].validate((valid) => {
        if (valid) {
          let flag = this.$refs["childRules"].validateForm();
          if (!flag) {
            this.$message.error("信息不完整，请继续填写完整");
            return false;
          } else {
            _this.clicked = true;
            let form = JSON.parse(
              JSON.stringify(_this.sysMch)
            );
            if(form.attach.busLicenseExpire){
              form.attach.busLicenseExpire = form.attach.busLicenseExpire
              // + ' 00:00:00'
            }
            form.attachVo = form.attach;
            form.attach = JSON.stringify(form.attach);
            update(form)
              .then((response) => {
                console.log(response);
                _this.clicked = false;
                EventBus.$emit("sysMch-edit", response.data);
                _this.$store
                  .dispatch("tagsView/delView", _this.$route)
                  .then(({ visitedViews }) => {
                    _this.$router.push({
                      path: "/sysMch/list",
                    });
                  });
              })
              .catch((error) => {
                _this.clicked = false;
              });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>
